<template>
  <!-- <div class="page statistics show-tabbar"> -->
    <div v-show="!noMsg" class="page work-wrap">
        <div @click="goPage(item.urd)" v-for="item in items" class="mod-card com-border-outside" style="display: block">
            <div class="topbar">
                <div class="type" :style="item.fontColorStyle"><span class="bg_sprite icon icon_notice" :style="item.iconBgStyle"></span>{{item.header}}</div>
                <!-- <div v-show="item.type==2" class="type type-1"><span class="icon"></span>签到</div>
                <div v-show="item.type==4" class="type type-1"><span class="icon"></span>公告</div>
                <div v-show="item.type==5" class="type type-1"><span class="icon"></span>通知</div> -->
                <span class="time">{{item.push_time}}</span>
            </div>
            <div class="content"> 
                <h3>{{item.title}}</h3>
                <p>{{item.description}}</p>
                <ul v-if="item.type == 7">
                    <li><span class="title">工资单名称：</span>{{item.form[0].order_name}}</li>
                    <!-- <li v-if="item.form[0].mes_class == 3"><span class="title">拒绝理由：</span>{{item.form[0].reason}}</li> -->
                    <li><span class="title">提交人：</span>{{item.form[0].user_name}}</li>
                    <li><span class="title">组别：</span>{{item.form[0].group_name}}</li>
                    <li><span class="title">金额：</span>{{item.form[0].total_wage/100}}</li>
                </ul>
                <img v-if="item.image_url" class="pic" :src="item.image_url">
            </div>
            <div v-show="item.button.length" v-for="btn in item.button">
              <a @click.stop class="button touch com-border-top" :href="btn.urd">
                {{btn.button}}
              </a>
            </div>
        </div>
    </div>
    <div class="mod-empty" v-show="noMsg">
        <div class="icon icon_1"></div>
        <p class="tip">当前无消息</p>
    </div>

    <div v-show="noData" class="weui-loadmore js-loadmore">
        <span class="b-list-end">没有更多了</span>
    </div>
    <div  v-show="loadMore" class="weui-loadmore js-loadmore">
        <i class="weui-loading"></i>
        <span class="">正在加载</span>
    </div>
    <div  v-show="!loadMore && !noData" class="weui-loadmore js-loadmore">
        <div></div>
    </div>
  <!-- </div> -->
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import $ from 'zepto'
    import * as util from 'js/util'
    import widget from 'gapi/widget.js'
    import commonPage from 'clientApi/commonPage'
    import cache from 'gapi/cache'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
              canNextRequest: true,
              loading: false,
              loadMore: false,
              noMsg: false,
              noData: false,
              items: [],
              teamId: '',
              projectId: '',
              projectName: '',
              page_number: 1,
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
              //参数team_id  , project_id
              this.teamId = util.getQueryString('team_id')
              this.projectId = util.getQueryString('project_id')
              this.projectName = decodeURIComponent(util.getQueryString('project_name'));
              this.memberCount =  util.getQueryString('member_count')
              this.unReadMsg = +util.getQueryString('unreadmsg')
              document.title = this.projectName
              cache.setMemoryCache('KqCacheMessge',{
                  team_id: this.teamId,
                  project_id: this.projectId
              })
              cache.setCache('p_name',{
                project_name: this.projectName
              }, 24 * 60 * 60)
               cache.setCache('KqCacheMessge',{
                    team_id: this.teamId,
                    project_id: this.projectId
                }, 24 * 60 * 60)
                window.goBack = () => {
                    cache.getMemoryCache('jcIndexWebViewID', (data) => {
                        if(data&&data.webViewID){
                            commonPage.goBack(1,{},data.webViewID)
                        } else {
                            commonPage.goBack(1,{})
                        }
                    })
                }
                commonPage.updateTitleBar({
                    backAction: 'goBack',
                    leftAction: 'goBack'
                });
                //@雷鸣 要求初始化时请求该接口
                this.unReadMsg && this.updateMsg();

                commonPage.getWebViewID((data)=>{
                    cache.setMemoryCache('projectAddWebViewId',{'webViewID':data})
                })

            },
            updateMsg (){
                util.ajax({
                    url:'/project/message/update',
                    type:'GET',
                    data:{
                        team_id : this.teamId,
                        project_id : this.projectId,
                    },
                    timeout:10000,
                    success:(result) => {
                        if(result.errno != 0){
                            widget.toast(result.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        // error
                        console.log(xhr)
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            //获取消息列表
            getMsgList (page_number, reload){
              util.ajax({
                  url:'/project/message/get',
                  type:'GET',
                  data:{
                      team_id :this.teamId,
                      project_id : this.projectId,
                      page_number : page_number,
                  },
                  timeout:10000,
                  beforeSend: () => {
                      this.canNextRequest = false
                      this.loading = true
                  },
                  success:(result) => {
                    console.log(result)
                      if(reload){
                        this.items = [];
                      }
                      if(result.errno == 0){
                        if(result.data.length == 0 && reload) {//reload无数据
                          this.loadMore = false
                          this.noMsg = true
                          commonPage.dataDownloadFinished()
                          return
                        } else if (result.data.length == 0){//加载更多没有数据了
                          this.loadMore = false
                          this.canNextRequest = false
                          this.noData = true
                        }

                        this.page_number++;
                          result.data.forEach((i) => {
                              i.iconBgStyle = {
                                  background : `url(${i.header_image})`,
                                  backgroundSize : '100%'
                              }
                              i.fontColorStyle = {
                                  color : i.header_color
                              }
                              this.items.push(i);
                          })
                          this.canNextRequest = true
                        commonPage.dataDownloadFinished()
                      }else if(result.errno == 15012){
                        // 无数据
                        this.canNextRequest = true
                        this.loadMore = false
                        if(reload){
                          this.noMsg = true  
                        }else{
                          this.noData = true
                        }
                        
                        commonPage.dataDownloadFinished()
                      }
                  },
                  error: (xhr, status) => {
                      // error
                      console.log(xhr)
                  },
                  complete: () => {
                      this.loading = false //refresh
                      this.loadMore = false
                  },
                  noNetwork: () => {
                      // 无网络的回调
                      widget.toast('网络连接失败，请检查网络')
                  }
              })
            },
            goPage (urd){
              console.log(urd)
                location.href = urd;
            }
        },
        created(){
            //设置项目详情页消息列表margin-top值
            window.offsetData = (data) => {
                // widget.toast(data)
                if(data){
                    $('html body').css({
                        'margin-top': data + 'px'
                    })
                }
                
            }
            this.init();

        },
        ready (){
            this.getMsgList(this.page_number, true) //第一次进入 获取消息列表

            // 下拉刷新
            window.loadData = () => {
              this.noData = false
              this.canNextRequest = true
              this.page_number = 1
                this.items = [];
              this.getMsgList(this.page_number, true)
            }

            commonPage.registerHitPageBottomListener(() => {
              if(this.canNextRequest){
                this.canNextRequest = false
                this.noData = false
                this.loadMore = true
                this.getMsgList(this.page_number, false)
              }else if(!this.canNextRequest && this.noData){
                this.noData = true
                if(this.page_number >1){
                  setTimeout(function(){
                    this.noData = false
                  }, 500);
                }
              }
            }, 50)
        }
    }


</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/project.css"></style>
<style>
.b-list-end {
  padding: 10px;
  text-align: center;
  font-size: 14px;
  color: #808080;
}
.weui-loadmore.js-loadmore{
  margin: 0 auto;
}
.weui-loadmore.js-loadmore div{
  height: 1.6em;
}
html body{
  margin-top: 154px;
}
</style>
